<template>
    <div class="my-proflie">
        <!-- 导航栏 -->
        <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="router.back()"> </van-nav-bar>
        <!--  -->
        <input type="file" hidden ref="file" @change="onFileChange">
        <!-- 个人信息 -->
        <van-cell title="头像" is-link @click="$refs.file.click()">
            <van-image class="avatar" fit="cover" round
                :src="user.photo" />
        </van-cell>
        <van-cell :value="user.name" title="昵称" @click="isEditName = true" is-link></van-cell>
        <van-cell :value="(user.gender===0?'男':'女')" title="性别" is-link @click="isEditGener = true"></van-cell>
        <van-cell :value="user.birthday" title="生日" is-link @click="isEditBirthday = true"></van-cell>
        <!-- 编辑昵称 -->
        <van-popup  position="bottom" :style="{height: '100%'}" v-model:show="isEditName">
            <edit-name v-if="isEditName" @upName="user.name = $event" :name="user.name" @close="isEditName = false"></edit-name>
        </van-popup>
        <!-- 编辑性别 -->
        <van-popup  position="bottom" :style="{height: '37%'}" v-model:show="isEditGener">
            <edit-gener v-if="isEditGener" @upGener="(user.gender = $event)" :gener="user.gender" @close="(isEditGener = false)"></edit-gener>
        </van-popup>
        <!-- 编辑生日 -->
        <van-popup  position="bottom" :style="{height: '37%'}" v-model:show="isEditBirthday">
            <edit-birthday :birthday="user.birthday" @upBirthday="(user.birthday = $event)"
            v-if="isEditBirthday" @close="(isEditBirthday = false)"></edit-birthday>
        </van-popup>
        <!-- 编辑头像 -->
        <van-popup v-if="isEditPhoto"  position="bottom" :style="{height: '100%'}" v-model:show="isEditPhoto">
            <edit-photo @upPhoto="user.photo = $event" @close="(isEditPhoto = false)" :img="imgUrl"></edit-photo>
        </van-popup>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { getUserProfileAPI } from '@/api/user'
import editName from './components/editName.vue'
import editGener from './components/editGener.vue'
import editBirthday from './components/editBirthday.vue'
import editPhoto from './components/editPhoto.vue'
import { ref } from 'vue'
export default {
  name: 'myProfile',
  components: {
    editName,
    editGener,
    editBirthday,
    editPhoto
  },
  setup () {
    const router = useRouter()
    const user = ref({})
    const isEditName = ref(false)
    const isEditGener = ref(false)
    const isEditBirthday = ref(false)
    const isEditPhoto = ref(false)
    // 获取file节点
    const file = ref()
    const imgUrl = ref(null)
    const onFileChange = () => {
      // console.log(file)
      const fileDom = file.value.files[0]
      imgUrl.value = window.URL.createObjectURL(fileDom)
      // 基于文章对象获取blob数据
      // 对象URL,是指存储在File或Blob中数据的URL。对象的URL的优点是不用把文件内容读取到JavaScript也可以使用文件。
      // 要创建对象URL可以使用window.URL.createObjectURL()方法传入File或Blob对象。这个函数返回的值是一个指向内存中地址的字符串。因为这个值是URL,可以在DOM中直接使用。
      isEditPhoto.value = true
      // file-input选中选着同一张图片 不触发，解决方法：每次清空value
      file.value.value = ''
    }
    const getUserProfile = async () => {
      try {
        const { data } = await getUserProfileAPI()
        user.value = data.data
      } catch (err) {
        console.log(err)
      }
    }
    getUserProfile()
    return {
      router,
      user,
      isEditName,
      isEditGener,
      isEditBirthday,
      onFileChange,
      file,
      isEditPhoto,
      imgUrl
    }
  }
}
</script>

<style scoped lang="less">
.my-proflie{
    .avatar{

        width: 60px;
        height: 60px;
    }
    :deep(.van-popup){
        background-color: #f5f7f9;
    }
}
</style>
